<template>
	<view >
		<view :style="'height:' + top1 + 'px'"></view>
		<scroll-view class="silding-frame" scroll-x="true" :scroll-into-view="goodTypeIndex" scroll-into-view-alignment="center" type="list" scroll-with-animation="true">
			<view :id="'good-'+ index" v-for="(item, index) in goodsTypeList" 
			:key="index" :class="index === isActive ? 'active' : ''" 
			class="select-box" @click="btn(index)" >{{goodMap.language == 'cn'? item.name: item.name_en}}</view>
		</scroll-view>
		<swiper @transition="transChange" :current="swiperCurrent" :style="'height:' + pageHeight + 'px'" class="images" @change="selectChange">
			<swiper-item v-for="(item, index) in goodsTypeList" :key="index">
				<my-goods :index="item.goods_type_id"></my-goods>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import goodApi from "../../apis/goodApi.js"
	import style from "@/store/style.js"
	export default {
		name:"my-goodlist",
		data() {
			return {
				top1: 0,
				pageHeight: 0,
				goodsTypeList: [],
				curNow: 0,
				goodMap:{
					language:"cn",
					platform:"pc",
					token:"0",
					ver:"0.5.0",
					shop_id: 4
				},
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				isActive: 0,
				goodTypeIndex: '',
				
			}
		},
		mounted() {
			
		},
		methods: {
			sectionChange(index){
				this.curNow = index;
				this.swiperCurrent = index;
			},
			getMenuButtonHeight(){
				let _that = this;
				const res = wx.getMenuButtonBoundingClientRect();
				let bottom = res.bottom + 25;
				const height = wx.getSystemInfo({
					success(res1){
						_that.pageHeight = res1.windowHeight - bottom - 40
					}
				})
				this.top1 = bottom + 10;
			},
			async getGoodInfo(){
				let name = ''
				if(style.state.flag){
					this.goodMap.language = 'cn'
					
				}else{
					this.goodMap.language = 'en'
					
				}
				this.goodMap.shop_id = style.state.cityId;
				const {data:res} = await goodApi.getAllGoods(this.goodMap)
				//console.log(res)
				this.goodsTypeList = res.data.goods_type_list
				this.goodsTypeList.unshift({name: "全部产品", name_en: "ALL PRODUCTE"})
		    },
			selectChange(e){
				this.curNow = e.detail.current
				this.isActive = e.detail.current
				this.goodTypeIndex = 'good-' + e.detail.current
				
				
			},
			btn(index){
				console.log(index)
				this.isActive = index
				this.swiperCurrent = index
				this.goodTypeIndex = 'good-' + index
			},
			transChange(e){
				if(this.curNow == 0 && e.detail.dx == 0){
					this.$emit('changeCurrent', 0)	
				}
			}
		},
		created(){
			this.getMenuButtonHeight();
			this.getGoodInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.silding-frame{
		width: 97%;
		margin-left: 5px;
		height: 40px;
		white-space: nowrap;
		.select-box{
			display: inline-block;
			border: 1px solid black;
			text-align: center;
			line-height: 25px;
			height: 25px;
			width: 150px;
			font-size: 12px;
			margin-right: 10px ;
			color: black;		
		}
		.active{
			color: white;
			background-color: black;
		}
	}
.selection-box{
	width: 600px;
	height: 100%;
	display: flex;
	align-items: center;
	// border: 1px solid red;
	white-space: nowrap;
}
.images{
	margin-top: 10px;
}
</style>